<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="btn1">
    <select v-model="slt">
        <option>+</option>
        <option>-</option>
        <option>*</option>
        <option>/</option>
    </select>
    <input type="text" v-model="btn2">
    <input type="button" value="=" @click="show()">
    <input type="text" v-model="btn3">
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            btn1: '',
            slt: '',
            btn2: '',
            btn3: ''
        },
        methods: {
            show() {
                switch (this.slt) {
                    case "+":
                        this.btn3 =  parseFloat(this.btn1) + parseFloat(this.btn2)
                        break;
                    case "-":
                        this.btn3 = parseFloat(this.btn1) - parseFloat(this.btn2)
                        break;
                    case "*":
                        this.btn3 = parseFloat(this.btn1) * parseFloat(this.btn2)
                        break;
                    case "/":
                        if (this.btn2 == 0){
                            this.btn3 = '除数不能为0'
                        }else {
                            this.btn3 = parseFloat(this.btn1) / parseFloat(this.btn2)
                        }
                        break;
                }
            }
        }
    })
</script>
</body>
</html>
